﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>能源监测</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            padding: 20px;
            background: linear-gradient(to bottom, 
                #fffff0 0%, 
                #fff7dc 25%, 
                #ffd08e 50%, 
                #ffe9c1 75%, 
                #fffaf4 100%);
            min-height: 100vh;
        }

        /* 顶部个人信息 */
        .header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .avatar-box {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #f0f0f0;
            overflow: hidden;
            border: 1px solid #e0e0e0;
        }

        .avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .username {
            font-size: 20px;
            font-weight: bold;
            margin-left: 15px;
        }

        /* 监测标题 */
        .monitor-title {
            font-size: 18px;
            margin: 8px;
            color: #333;
        }

        /* 水电气报告卡片 */
        .watergas-card {
            background: white;
            border-radius: 15px;
            padding: 15px;
            box-shadow: 2px 2px 2px rgba(255, 170, 0, 0.2);
            margin-bottom: 15px;
        }

        .watergas-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .watergas-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }

        .watergas-sound-icon {
            width: 24px;
            height: 24px;
        }

        .watergas-content {
            display: flex;
            align-items: center;
        }

        .watergas-icon-container {
            width: 100px;
            height: 100px;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .watergas-icon {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .watergas-tip {
            font-size: 14px;
            color: #333;
            line-height: 1.5;
            flex: 1;
        }



        /* 通用卡片样式 */
        .energy-card {
            background: white;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 2px 2px 2px rgba(255, 170, 0, 0.2);
            margin-bottom: 15px;
        }

        .card-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 120px;
        }

        .card-left {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            width: 40%;
        }

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .card-name {
            font-size: 40px;
            font-weight: bold;
            color: #000;
            margin-right: 10px;
        }

        .card-icon {
            width: 50px;
            height: 50px;
        }

        /* 图表区域 */
        .chart-container {
            width: 55%;
            height: 100%;
        }

        .chart-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .water-elec-status {
            font-size: 25px;
            font-weight: bold;
            color: #000000;
            margin-top: 20px;
        }

        .gas-status {
            font-size: 25px;
            font-weight: bold;
            color: #13da41;
            margin-top: 20px;
        }

        /* 回到顶部按钮 */
        .back-to-top {
            justify-content: center;
            margin: 20px auto 0;
            width:fit-content;
            display: flex;
            background: #ffa64d;
            border-radius: 30px;
            padding: 10px 20px;
            box-shadow: 0 2px 6px rgba(255, 166, 77, 0.3);
            cursor: pointer;
        }

        .back-to-top-icon {
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }

        .back-to-top-text {
            color: #747474;
            font-size: 16px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 用量报告 -->
        <div class="watergas-card">
            <div class="watergas-header">
                <span class="watergas-title">水电气用量分析报告</span>
                <img class="watergas-sound-icon" src="./images/pages/喇叭.png" alt="提示">
            </div>
            <div class="watergas-content">
                <div class="watergas-icon-container">
                    <img class="watergas-icon" src="./images/pages/water.png" alt="用水分析">
                </div>
                <p class="watergas-tip">
                    今日用水量为124L，对比上周减少15%，用电量为6kWh，对比上周增加5%，燃气无异常泄漏。
                </p>
            </div>
        </div>

        <div class="monitor-title">水电气监测</div>

        <!-- 水卡片 -->
        <div class="energy-card">
            <div class="card-container">
                <div class="card-left">
                    <div class="card-header">
                        <span class="card-name">水</span>
                        <img class="card-icon" src="./images/pages/水image.png" alt="水表">
                    </div>
                    <span class="water-elec-status">531L</span>
                </div>
            </div>
        </div>

        <!-- 电卡片 -->
        <div class="energy-card">
            <div class="card-container">
                <div class="card-left">
                    <div class="card-header">
                        <span class="card-name">电</span>
                        <img class="card-icon" src="./images/pages/电image.png" alt="电表">
                    </div>
                    <span class="water-elec-status">6kWh</span>
                </div>
                <div class="chart-container">
                    <img class="chart-img" src="./images/pages/电统计图.png" alt="用电趋势">
                </div>
            </div>
        </div>

        <!-- 气卡片 -->
        <div class="energy-card">
            <div class="card-container">
                <div class="card-left">
                    <div class="card-header">
                        <span class="card-name">气</span>
                        <img class="card-icon" src="./images/pages/气image.png" alt="燃气表">
                    </div>
                    <span class="gas-status">无异常</span>
                </div>
            </div>
        </div>

        <!-- 回到顶部 -->
        <div class="back-to-top" onclick="scrollToTop()">
            <img class="back-to-top-icon" src="./images/pages/上-箭头.png" alt="回到顶部">
            <span class="back-to-top-text">回到顶部</span>
        </div>
    </div>

    <script>
        // 回到顶部功能
        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }
    </script>
</body>
</html>